<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* body有默认外边距,去除所有元素的内外间距 */
    * {
      margin: 0;
      padding: 0;
    }
    .header {
      height: 52px;
      background-color: #f5f5f5;
    }
    .center {
      /* pc端定宽元素 */
      width: 1000px;
      /* 块级元素水平居中 */
      margin: auto;
    }
    .header h1 {
      /* 变行内块 */
      display: inline-block;
      font-size: 24px;
    }
    .header img {
      /* 垂直对齐用来对齐旁边的文字 */
      vertical-align: middle;
    }
    /* 大背景+登录 */
    .bg {
      width: 100%;/*不写也行因为默认就是100%*/
      height: 560px;
      background-image: url(./img/xz-login/regist.png);
      overflow: hidden;
    }
    .login-area {
      width: 280px;
      background-color: rgba(139, 243, 238, 0.5);
      padding-bottom: 10px;
      margin-left: 720px;
      margin-top: 150px;
    }
    .bg .tit {
      height: 40px;
      border-bottom: 1px solid #f5f5f5;
    }
    .bg .tit b {
      color: #fff;
      font-size: 20px;
      margin-right: 60px;
      margin-left: 10px;

    }
    .bg .tit a {color: #fff;}
    .bg .login-input input {
      width: 100%;
      height: 34px;
      border: 0;/*把边框清掉*/
      display: block;
      box-sizing: border-box;
      margin: 15px 0;
      background-repeat: no-repeat;
      background-position: 95% 50%;
    }
    .bg .login-input .user {
      background-image: url(./img/xz-login/yhm.png);
    }
    .bg .login-input .pwd {
      background-image: url(./img/xz-login/mm.png);
    }
    .bg .login-input label {
      font-size: 12px;
      color: red;
    }
    .bg .login-auto {
      font-size: 12px;
      color: white;
    }
    .bg button {
      width: 100%;
      height: 35px;
      border: 0;
      color: white;
      background-color: rgb(30, 147, 243);
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <!-- 页头100% -->
  <div class="header">
    <!-- 居中的定宽元素 -->
    <div class="center">
      <!-- logo图 -->
      <img src="./img/xz-login/logo.png" alt="">
      <!-- 大标题，考虑横着拍，变成行内块 -->
      <h1>欢迎登陆</h1>
    </div>
  </div>
  <!-- 大背景+登录 -->
  <div class="bg">
    <!-- 居中定宽元素 -->
    <div class="center">
      <!-- 登录区域 -->
      <div class="login-area">
        <!-- 登录标题 -->
        <div class="tit">
          <b>登录学子商城</b>
          <a href="#">新用户注册</a>
        </div>
        <!-- input区域 -->
        <div class="login-input">
          <input type="text" placeholder="用户名" class="user">
          <label>用户名不能为空</label>
          <input type="password" placeholder="密码" class="pwd">
        </div>
        <!-- 自动登录 -->
        <div class="login-auto">
          <input type="checkbox" id="yes">
          <label for="yes">自动登录</label>
        </div>
        <!-- 按钮 -->
        <button>登录</button>
      </div>
    </div>
  </div>
</body>
</html>